<template>
	<section>
		<div class="head-wrap">
			<user-info></user-info>
			<personal-bar></personal-bar>
		</div>
		<div class="title">我的积分</div>
		<div class="info">
			<div class="sub left">
				<img src="@/assets/img/residue.png">
				<div>
					<p class="residue">{{scoreInfo.residue_score}}</p>
					<span>剩余积分</span>
				</div>
			</div>
			
			<div class="sub right">
				<img src="@/assets/img/use.png">
				<div>
					<p class="use">{{scoreInfo.user_score}}</p>
					<span>消耗积分</span>
				</div>
			</div>
		</div>
		
		<ul class="list-wrap">
			<li class="tab-heade">
				<span>积分明细</span>
				<span>日期</span>
				<span>积分</span>
			</li>
			<li v-for='(item,index) in scoreList' :key="item.id" class="list">
				<span>{{item.desc}}</span>
				<span>{{item.create_time}}</span>
				<span :class="item.type == 1 ? 'add' : 'decline'">{{item.type | scoreTypeStatus}}{{item.score}}</span>
			</li>
		</ul>
		<common-pagination v-if='total > 10' :total="total" :size="searchData.size" @size-change="handelPagesizeChange" @page-change="handlePageChange"></common-pagination>
	</section>
</template>

<script>
	import utils from '@/assets/js/utils';
	import CommonPagination from '@/components/CommonPagination';
	import PersonalBar from '@/components/PersonalBar';
	import UserInfo from './components/userInfo';
	import {getScore} from '@/api/personal'
	export default {
		data() {
			return {
				searchData: {
					page: 1,
					size: 10
				},
				scoreList: [],
				scoreInfo:{},
				total: 0,
				realname:"",
				headimg:"",
				createTime:""
			};
		},

		created() {
			this.realname = utils.getSession('realname');
			this.headimg = utils.getSession('headimg');
			this.createTime = utils.getSession('createTime');
			this.getUserScore();
		},

		methods: {
			async getUserScore() {
				const {
					data,
					status
				} = await getScore(this.searchData);
				if (status !== 200) return
				if (data.code == 200) {
					this.scoreList = data?.data?.list || [];
					this.total = data?.data?.total || 0;
					this.scoreInfo = data.data?.info || {}
				} else {
					this.scoreList = [];
					this.scoreInfo = {};
					this.total = 0
					this.$message.warning(data && data.message || '获取失败');
				}
			},
			handelPagesizeChange(size) {
				this.searchData.size = size;
				this.getUserScore();
			},
			
			handlePageChange(page) {
				this.searchData.page = page;
				this.getUserScore();
			},
		},
		components: {
			CommonPagination,
			PersonalBar,
			UserInfo
		}
	};
</script>

<style lang="scss" scoped>
	.head-wrap{
		@include flex-row;
		justify-content: space-between;
		margin-bottom: 30px;
	}
	.title{
		font-weight: bold;
		font-size: 18px;
		color: #000000;
		margin-bottom: 16px;
	}
	.info{
		@include flex-row;
		justify-content: space-between;
		margin-bottom: 30px;
		.sub{
			width: 49%;
			height: 100px;
			@include flex-row;
			justify-content: center;
			img{
				display: block;
				width: 62px;
				height: 62px;
				margin-right: 40px;
			}
			div{
				@include flex-row;
				flex-direction: column;
				justify-content: space-between;
				span{
					font-size: 14px;
					color: #6C7B8A;
				}
				p{
					font-weight: bold;
					font-size: 30px;
				}
				.residue{
					
					color: #0AB7FF;
				}
				.use{
					color: #FF4747;
				}
			}
		}
		.left{
			background: #E0F0FF;
			border-radius: 10px 10px 10px 10px;
		}
		.right{
			background: #FFEEEE;
			border-radius: 10px 10px 10px 10px;
		}
	}
	.list-wrap {
		li {
			padding: 16px 0;
			@include flex-row;
			justify-content: space-around;
			font-size: 16px;
			color: #666666;
			span{
				width: 33%;
				display: block;
				text-align: center;
			}
			.add{
				color: #33D098;
			}
			.decline{
				color: #FF8A00;
			}
		}
		.tab-heade{
			background: #F0F3F4;
			color: #333333;
		}
	}
	.list-wrap .list:nth-child(2n+3) {
		background: #F9F9F9;
	}
	
</style>